Lordicon Extension for Quarto
This extension allows you to use lordicon icons in your Quarto HTML documents.
Shortcodes
The {{< li >}} shortcode renders an icon (specified by its code) after downloading it the lordicon CDN. The {{< lif >}} shortcode renders an icon (specified by its filepath) from a local .json file. Both shortcodes support the same arguments for customization, described below.
| Pseudocode | Example Code | Rendered |
|---|---|---|
{{< li code >}} |
{{< li wlpxtupd >}} |
|
{{< lif file >}} |
{{< lif church.json >}} |
Triggers
trigger controls the icon’s animation type. When using the loop or loop-on-hover triggers, you can also set an optional delay (in ms) between loops.
| Shortcode | Icon |
|---|---|
{{< li wxnxiano >}} |
|
{{< li wxnxiano trigger=click >}} |
|
{{< li wxnxiano trigger=hover >}} |
|
{{< li wxnxiano trigger=loop >}} |
|
{{< li wxnxiano trigger=loop delay=1000 >}} |
|
{{< li wxnxiano trigger=loop-on-hover >}} |
|
{{< li wxnxiano trigger=loop-on-hover delay=1000 >}} |
|
{{< li wxnxiano trigger=morph >}} |
|
{{< li wxnxiano trigger=boomerang >}} |
Speed
speed controls how quickly the icon’s animation plays.
| Shortcode | Icon |
|---|---|
{{< li lupuorrc trigger=loop speed=0.5 >}} |
|
{{< li lupuorrc trigger=loop speed=1.0 >}} |
|
{{< li lupuorrc trigger=loop speed=2.0 >}} |
Colors
colors controls the icon’s coloring. Outline icons typically have just a primary and secondary color, but flat and lineal icons can have many more. Each color should be given in rank:color format (where ranks are primary, secondary, tertiary, etc.) and multiple colors should be separated by commas. Colors can be given in HTML color names or hexcodes.
| Shortcode | Icon |
|---|---|
{{< li lupuorrc >}} |
|
{{< li lupuorrc colors=primary:gold >}} |
|
{{< li lupuorrc colors=primary:gray,secondary:orange >}} |
|
{{< li lupuorrc colors=primary:#4030e8,secondary:#ee66aa >}} |
Stroke
stroke controls how thick the lines in an icon are.
| Shortcode | Icon |
|---|---|
{{< li lupuorrc stroke=50 >}} |
|
{{< li lupuorrc stroke=100 >}} |
|
{{< li lupuorrc stroke=150 >}} |
Scale
scale controls how large or zoomed in the icon is.
| Shortcode | Icon |
|---|---|
{{< li lupuorrc scale=25 >}} |
|
{{< li lupuorrc scale=50 >}} |
|
{{< li lupuorrc scale=100 >}} |
Axis X
x controls the horizontal position of the center of the icon.
| Shortcode | Icon |
|---|---|
{{< li lupuorrc x=25 >}} |
|
{{< li lupuorrc x=50 >}} |
|
{{< li lupuorrc x=100 >}} |
Axis Y
y controls the vertical position of the center of the icon.
| Shortcode | Icon |
|---|---|
{{< li lupuorrc y=25 >}} |
|
{{< li lupuorrc y=50 >}} |
|
{{< li lupuorrc y=100 >}} |